<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="keywords" content="Hexo Theme Keep">
    <meta name="description" content="Hexo Theme Keep">
    <meta name="author" content="Tckapco">
    
    <title>
        
            异步方案——Generator |
        
        Tckapco
    </title>
    
<link rel="stylesheet" href="/css/style.css">

    <link rel="shortcut icon" href="/images/logo.svg">
    <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/hexo-theme-keep@3.4.5/source/css/font-awesome.min.css">
    <script id="hexo-configurations">
    let KEEP = window.KEEP || {};
    KEEP.hexo_config = {"hostname":"theboat.gitee.io","root":"/","language":"en"};
    KEEP.theme_config = {"toc":{"enable":true,"number":true,"expand_all":true,"init_open":true},"style":{"primary_color":"#0066CC","avatar":"/images/avatar.jpg","favicon":"/images/logo.svg","article_img_align":"left","left_side_width":"260px","content_max_width":"920px","hover":{"shadow":false,"scale":true},"first_screen":{"enable":true,"background_img":"/images/bg.svg","description":"Keep writing and Keep loving."},"scroll":{"progress_bar":{"enable":false},"percent":{"enable":false}}},"local_search":{"enable":false,"preload":false},"code_copy":{"enable":true,"style":"mac"},"pjax":{"enable":false},"lazyload":{"enable":false},"version":"3.4.5"};
    KEEP.language_ago = {"second":"%s seconds ago","minute":"%s minutes ago","hour":"%s hours ago","day":"%s days ago","week":"%s weeks ago","month":"%s months ago","year":"%s years ago"};
  </script>
<meta name="generator" content="Hexo 5.4.0"></head>


<body>
<div class="progress-bar-container">
    

    
</div>


<main class="page-container">

    

    <div class="page-main-content">

        <div class="page-main-content-top">
            <header class="header-wrapper">

    <div class="header-content">
        <div class="left">
            
            <a class="logo-title" href="/">
                Tckapco
            </a>
        </div>

        <div class="right">
            <div class="pc">
                <ul class="menu-list">
                    
                        <li class="menu-item">
                            <a class=""
                               href="/"
                            >
                                HOME
                            </a>
                        </li>
                    
                        <li class="menu-item">
                            <a class=""
                               href="/archives"
                            >
                                ARCHIVES
                            </a>
                        </li>
                    
                        <li class="menu-item">
                            <a class=""
                               href="/categories"
                            >
                                CATEGORIES
                            </a>
                        </li>
                    
                        <li class="menu-item">
                            <a class=""
                               href="/links"
                            >
                                LINKS
                            </a>
                        </li>
                    
                    
                </ul>
            </div>
            <div class="mobile">
                
                <div class="icon-item menu-bar">
                    <div class="menu-bar-middle"></div>
                </div>
            </div>
        </div>
    </div>

    <div class="header-drawer">
        <ul class="drawer-menu-list">
            
                <li class="drawer-menu-item flex-center">
                    <a class=""
                       href="/">HOME</a>
                </li>
            
                <li class="drawer-menu-item flex-center">
                    <a class=""
                       href="/archives">ARCHIVES</a>
                </li>
            
                <li class="drawer-menu-item flex-center">
                    <a class=""
                       href="/categories">CATEGORIES</a>
                </li>
            
                <li class="drawer-menu-item flex-center">
                    <a class=""
                       href="/links">LINKS</a>
                </li>
            
        </ul>
    </div>

    <div class="window-mask"></div>

</header>


        </div>

        <div class="page-main-content-middle">

            <div class="main-content">

                
                    <div class="fade-in-down-animation">
    <div class="article-content-container">

        <div class="article-title">
            <span class="title-hover-animation">异步方案——Generator</span>
        </div>

        
            <div class="article-header">
                <div class="avatar">
                    <img src="/images/avatar.jpg">
                </div>
                <div class="info">
                    <div class="author">
                        <span class="name">Tckapco</span>
                        
                            <span class="author-label">Lv2</span>
                        
                    </div>
                    <div class="meta-info">
                        <div class="article-meta-info">
    <span class="article-date article-meta-item">
        <i class="fas fa-edit"></i>&nbsp;
        <span class="pc">2021-05-17 15:13:01</span>
        <span class="mobile">2021-05-17 15:13</span>
    </span>
    
        <span class="article-categories article-meta-item">
            <i class="fas fa-folder"></i>&nbsp;
            <ul>
                
                    <li>
                        <a href="/categories/JavaScript/">JavaScript</a>&nbsp;
                    </li>
                
                    <li>
                        &gt; <a href="/categories/JavaScript/%E5%BC%82%E6%AD%A5%E6%96%B9%E6%A1%88/">异步方案</a>&nbsp;
                    </li>
                
            </ul>
        </span>
    
    
        <span class="article-tags article-meta-item">
            <i class="fas fa-tags"></i>&nbsp;
            <ul>
                
                    <li>
                        <a href="/tags/Generator/">Generator</a>&nbsp;
                    </li>
                
            </ul>
        </span>
    

    
    
        <span class="article-wordcount article-meta-item">
            <i class="fas fa-file-word"></i>&nbsp;<span>1.7k Words</span>
        </span>
    
    
        <span class="article-min2read article-meta-item">
            <i class="fas fa-clock"></i>&nbsp;<span>6 Mins</span>
        </span>
    
    
</div>

                    </div>
                </div>
            </div>
        

        <div class="article-content markdown-body">
            <h1 id="Generator概念"><a href="#Generator概念" class="headerlink" title="Generator概念"></a>Generator概念</h1><p>Generator 函数是一个状态机，封装了多个内部状态。执行 Generator 函数会返回一个遍历器对象，可以依次遍历 Generator 函数内部的每一个状态，但是只有调用<code>next</code>方法才会遍历下一个内部状态，所以其实提供了一种可以暂停执行的函数。<code>yield</code>表达式就是暂停标志。</p>
<p>有这样一段代码：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">function* helloWorldGenerator() &#123;</span><br><span class="line">  yield &#39;hello&#39;;</span><br><span class="line">  yield &#39;world&#39;;</span><br><span class="line">  return &#39;ending&#39;;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">var hw &#x3D; helloWorldGenerator();</span><br></pre></td></tr></table></figure>

<p>该函数有三个状态：hello，world 和 return 语句（结束执行）</p>
<p>调用及运行结果：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">hw.next()&#x2F;&#x2F; &#123; value: &#39;hello&#39;, done: false &#125;</span><br><span class="line">hw.next()&#x2F;&#x2F; &#123; value: &#39;world&#39;, done: false &#125;</span><br><span class="line">hw.next()&#x2F;&#x2F; &#123; value: &#39;ending&#39;, done: true &#125;</span><br><span class="line">hw.next()&#x2F;&#x2F; &#123; value: undefined, done: true &#125;</span><br></pre></td></tr></table></figure>

<p>由结果可以看出，<code>Generator函数</code>被调用时并不会执行，只有当调用<code>next方法</code>、内部指针指向该语句时才会执行，<code>即函数可以暂停，也可以恢复执行</code>。每次调用遍历器对象的next方法，就会返回一个有着<code>value</code>和<code>done</code>两个属性的对象。<code>value</code>属性表示当前的内部状态的值，是yield表达式后面那个表达式的值；<code>done</code>属性是一个布尔值，表示是否遍历结束。</p>
<h1 id="yield"><a href="#yield" class="headerlink" title="yield"></a>yield</h1><blockquote>
<p>yield在英文里的意思是“产出”</p>
</blockquote>
<h2 id="1-运行逻辑"><a href="#1-运行逻辑" class="headerlink" title="1.运行逻辑"></a>1.运行逻辑</h2><p>由于 Generator 函数返回的遍历器对象，只有调用<code>next</code>方法才会遍历下一个内部状态，所以其实提供了一种可以暂停执行的函数。<code>yield</code>表达式就是暂停标志。</p>
<p>遍历器对象的<code>next</code>方法的运行逻辑如下。</p>
<p>（1）遇到<code>yield</code>表达式，就暂停执行后面的操作，并将紧跟在<code>yield</code>后面的那个表达式的值，作为返回的对象的<code>value</code>属性值。</p>
<p>（2）下一次调用<code>next</code>方法时，再继续往下执行，直到遇到下一个<code>yield</code>表达式。</p>
<p>（3）如果没有再遇到新的<code>yield</code>表达式，就一直运行到函数结束，直到<code>return</code>语句为止，并将<code>return</code>语句后面的表达式的值，作为返回的对象的<code>value</code>属性值。</p>
<p>（4）如果该函数没有<code>return</code>语句，则返回的对象的<code>value</code>属性值为<code>undefined</code>。</p>
<p>需要注意的是，<code>yield</code>表达式后面的表达式，只有当调用<code>next</code>方法、内部指针指向该语句时才会执行，因此等于为 JavaScript 提供了手动的“惰性求值”（Lazy Evaluation）的语法功能。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span>* <span class="title">gen</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="keyword">yield</span>  <span class="number">123</span> + <span class="number">456</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>上面代码中，<code>yield</code>后面的表达式<code>123 + 456</code>，不会立即求值，只会在<code>next</code>方法将指针移到这一句时，才会求值。</p>
<h2 id="2-委托迭代"><a href="#2-委托迭代" class="headerlink" title="2.委托迭代"></a>2.委托迭代</h2><p>带星号的 <code>yield</code> 可以将它的工作委托给另一个生成器。通过这种方式，你就能将多个生成器连接在一起。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br></pre></td><td class="code"><pre><span class="line">function* foo() &#123;</span><br><span class="line">  yield &#39;a&#39;;</span><br><span class="line">  yield &#39;b&#39;;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">function* bar() &#123;</span><br><span class="line">  yield &#39;x&#39;;</span><br><span class="line">  yield* foo();</span><br><span class="line">  yield &#39;y&#39;;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; 等同于</span><br><span class="line">function* bar() &#123;</span><br><span class="line">  yield &#39;x&#39;;</span><br><span class="line">  yield &#39;a&#39;;</span><br><span class="line">  yield &#39;b&#39;;</span><br><span class="line">  yield &#39;y&#39;;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; 等同于</span><br><span class="line">function* bar() &#123;</span><br><span class="line">  yield &#39;x&#39;;</span><br><span class="line">  for (let v of foo()) &#123;</span><br><span class="line">    yield v;</span><br><span class="line">  &#125;</span><br><span class="line">  yield &#39;y&#39;;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">for (let v of bar())&#123;</span><br><span class="line">  console.log(v);</span><br><span class="line">&#125;</span><br><span class="line">&#x2F;&#x2F; &quot;x&quot;</span><br><span class="line">&#x2F;&#x2F; &quot;a&quot;</span><br><span class="line">&#x2F;&#x2F; &quot;b&quot;</span><br><span class="line">&#x2F;&#x2F; &quot;y&quot;</span><br></pre></td></tr></table></figure>



<h1 id="其他"><a href="#其他" class="headerlink" title="其他"></a>其他</h1><h2 id="Generator函数暂停恢复执行原理"><a href="#Generator函数暂停恢复执行原理" class="headerlink" title="Generator函数暂停恢复执行原理"></a>Generator函数暂停恢复执行原理</h2><p>要搞懂函数为何能暂停和恢复，那你首先要了解协程的概念。</p>
<blockquote>
<p>一个线程（或函数）执行到一半，可以暂停执行，将执行权交给另一个线程（或函数），等到稍后收回执行权的时候，再恢复执行。这种可以并行执行、交换执行权的线程（或函数），就称为协程。</p>
</blockquote>
<p>协程是一种比线程更加轻量级的存在。普通线程是抢先式的，会争夺cpu资源，而协程是合作的，可以把协程看成是跑在线程上的任务，一个线程上可以存在多个协程，但是在线程上同时只能执行一个协程。它的运行流程大致如下：</p>
<ol>
<li>协程<code>A</code>开始执行</li>
<li>协程<code>A</code>执行到某个阶段，进入暂停，执行权转移到协程<code>B</code></li>
<li>协程<code>B</code>执行完成或暂停，将执行权交还<code>A</code></li>
<li>协程<code>A</code>恢复执行</li>
</ol>
<p>协程遇到<code>yield命令</code>就暂停，等到执行权返回，再从暂停的地方继续往后执行。它的最大优点，就是代码的写法非常像同步操作，如果去除yield命令，简直一模一样。</p>
<h1 id="应用"><a href="#应用" class="headerlink" title="应用"></a>应用</h1><h2 id="1-异步操作的同步化表达"><a href="#1-异步操作的同步化表达" class="headerlink" title="1.异步操作的同步化表达"></a>1.异步操作的同步化表达</h2><p>Generator 函数的<strong>暂停执行</strong>的效果，意味着可以把异步操作写在<code>yield</code>表达式里面，等到<strong>调用<code>next</code>方法时再往后执行</strong>。这实际上等同于不需要写回调函数了，因为异步操作的后续操作可以放在<code>yield</code>表达式下面，反正要等到调用<code>next</code>方法时再执行。所以，Generator 函数的一个重要实际意义就是用来处理异步操作，改写回调函数。</p>
<p>Ajax 是典型的异步操作，通过 Generator 函数部署 Ajax 操作，可以用同步的方式表达。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span>* <span class="title">main</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="keyword">var</span> result = <span class="keyword">yield</span> request(<span class="string">&quot;http://some.url&quot;</span>);</span><br><span class="line">  <span class="keyword">var</span> resp = <span class="built_in">JSON</span>.parse(result);</span><br><span class="line">    <span class="built_in">console</span>.log(resp.value);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">request</span>(<span class="params">url</span>) </span>&#123;</span><br><span class="line">  makeAjaxCall(url, <span class="function"><span class="keyword">function</span>(<span class="params">response</span>)</span>&#123;</span><br><span class="line">    it.next(response);</span><br><span class="line">  &#125;);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> it = main();</span><br><span class="line">it.next();</span><br></pre></td></tr></table></figure>

<p>上面代码的<code>main</code>函数，就是通过 Ajax 操作获取数据。可以看到，除了多了一个<code>yield</code>，它几乎与同步操作的写法完全一样。注意，<code>makeAjaxCall</code>函数中的<code>next</code>方法，必须加上<code>response</code>参数，因为<code>yield</code>表达式，本身是没有值的，总是等于<code>undefined</code>。</p>
<blockquote>
<p>封装一个request方法，方法内执行next并返回结果。调用requst获取结果，看起来像是同步执行的操作</p>
</blockquote>
<p>阮一峰还列举了其他3种应用：</p>
<ul>
<li><p>控制流管理：简化回调函数，promise操作</p>
</li>
<li><p>部署Iterator接口</p>
</li>
<li><p>作为数据结构</p>
</li>
</ul>
<h1 id="参考"><a href="#参考" class="headerlink" title="参考"></a>参考</h1><p>阮一峰：Thunk函数：<a target="_blank" rel="noopener" href="https://www.ruanyifeng.com/blog/2015/05/thunk.html">https://www.ruanyifeng.com/blog/2015/05/thunk.html</a></p>
<p>阮一峰ES6：<a target="_blank" rel="noopener" href="https://es6.ruanyifeng.com/#docs/generator">https://es6.ruanyifeng.com/#docs/generator</a></p>
<p>[译] 什么是 JavaScript 生成器？如何使用生成器？：<a target="_blank" rel="noopener" href="https://juejin.cn/post/6844903616357072910">https://juejin.cn/post/6844903616357072910</a></p>
<p>async/await 原理及执行顺序分析：<a target="_blank" rel="noopener" href="https://juejin.cn/post/6844903988584775693">https://juejin.cn/post/6844903988584775693</a></p>
<p>讶羽：ES6 系列之 Generator 的自动执行：<a target="_blank" rel="noopener" href="https://juejin.cn/post/6844903695335817229">https://juejin.cn/post/6844903695335817229</a></p>
<h1 id="总结"><a href="#总结" class="headerlink" title="总结"></a>总结</h1><p>Generator是一种异步编程的方案。可以把它理解为一个状态机，封装了多个内部状态，</p>
<p>执行Generator时会返回一个遍历器对象，可以遍历Generator函数内部每一个状态</p>
<p>只有调用next方法才会遍历下一个内部状态，但是Generator内部又提供了yield方法，可以暂停函数的执行</p>
<p>利用Generator的特性，我们可以把异步操作同步化表达，执行异步操作后调用next()方法并获取结果。然后继续执行下一个状态，达到”同步”的效果</p>

        </div>

        

        
            <ul class="post-tags-box">
                
                    <li class="tag-item">
                        <a href="/tags/Generator/">#Generator</a>&nbsp;
                    </li>
                
            </ul>
        

        
            <div class="article-nav">
                
                    <div class="article-prev">
                        <a class="prev"
                           rel="prev"
                           href="/2021/05/20/ES6-Set,Map/"
                        >
                            <span class="left arrow-icon flex-center">
                              <i class="fas fa-chevron-left"></i>
                            </span>
                            <span class="title flex-center">
                                <span class="post-nav-title-item">ES6-Set,Map</span>
                                <span class="post-nav-item">Prev posts</span>
                            </span>
                        </a>
                    </div>
                
                
                    <div class="article-next">
                        <a class="next"
                           rel="next"
                           href="/2021/05/14/ES6-Symbol/"
                        >
                            <span class="title flex-center">
                                <span class="post-nav-title-item">ES6-Symbol</span>
                                <span class="post-nav-item">Next posts</span>
                            </span>
                            <span class="right arrow-icon flex-center">
                              <i class="fas fa-chevron-right"></i>
                            </span>
                        </a>
                    </div>
                
            </div>
        

        
    </div>
</div>


                
            </div>

        </div>

        <div class="page-main-content-bottom">
            <footer class="footer">
    <div class="info-container">
        <div class="copyright-info info-item">
            &copy;
            
              <span>2020</span>
              -
            
            2022&nbsp;<i class="fas fa-heart icon-animate"></i>&nbsp;<a href="/">Tckapco</a>
        </div>
        
        <div class="theme-info info-item">
            Powered by <a target="_blank" href="https://hexo.io">Hexo</a>&nbsp;|&nbsp;Theme&nbsp;<a class="theme-version" target="_blank" href="https://github.com/XPoet/hexo-theme-keep">Keep v3.4.5</a>
        </div>
        
        
    </div>
</footer>

        </div>
    </div>

    
        <div class="post-tools">
            <div class="post-tools-container">
    <ul class="tools-list">
        <!-- TOC aside toggle -->
        
            <li class="tools-item page-aside-toggle">
                <i class="fas fa-outdent"></i>
            </li>
        

        <!-- go comment -->
        
    </ul>
</div>

        </div>
    

    <div class="right-bottom-side-tools">
        <div class="side-tools-container">
    <ul class="side-tools-list">
        <li class="tools-item tool-font-adjust-plus flex-center">
            <i class="fas fa-search-plus"></i>
        </li>

        <li class="tools-item tool-font-adjust-minus flex-center">
            <i class="fas fa-search-minus"></i>
        </li>

        <li class="tools-item tool-expand-width flex-center">
            <i class="fas fa-arrows-alt-h"></i>
        </li>

        <li class="tools-item tool-dark-light-toggle flex-center">
            <i class="fas fa-moon"></i>
        </li>

        <!-- rss -->
        

        
            <li class="tools-item tool-scroll-to-top flex-center">
                <i class="fas fa-arrow-up"></i>
            </li>
        

        <li class="tools-item tool-scroll-to-bottom flex-center">
            <i class="fas fa-arrow-down"></i>
        </li>
    </ul>

    <ul class="exposed-tools-list">
        <li class="tools-item tool-toggle-show flex-center">
            <i class="fas fa-cog fa-spin"></i>
        </li>
        
    </ul>
</div>

    </div>

    
        <aside class="page-aside">
            <div class="post-toc-wrap">
    <div class="post-toc">
        <ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#Generator%E6%A6%82%E5%BF%B5"><span class="nav-number">1.</span> <span class="nav-text">Generator概念</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#yield"><span class="nav-number">2.</span> <span class="nav-text">yield</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#1-%E8%BF%90%E8%A1%8C%E9%80%BB%E8%BE%91"><span class="nav-number">2.1.</span> <span class="nav-text">1.运行逻辑</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#2-%E5%A7%94%E6%89%98%E8%BF%AD%E4%BB%A3"><span class="nav-number">2.2.</span> <span class="nav-text">2.委托迭代</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%85%B6%E4%BB%96"><span class="nav-number">3.</span> <span class="nav-text">其他</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#Generator%E5%87%BD%E6%95%B0%E6%9A%82%E5%81%9C%E6%81%A2%E5%A4%8D%E6%89%A7%E8%A1%8C%E5%8E%9F%E7%90%86"><span class="nav-number">3.1.</span> <span class="nav-text">Generator函数暂停恢复执行原理</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%BA%94%E7%94%A8"><span class="nav-number">4.</span> <span class="nav-text">应用</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#1-%E5%BC%82%E6%AD%A5%E6%93%8D%E4%BD%9C%E7%9A%84%E5%90%8C%E6%AD%A5%E5%8C%96%E8%A1%A8%E8%BE%BE"><span class="nav-number">4.1.</span> <span class="nav-text">1.异步操作的同步化表达</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%8F%82%E8%80%83"><span class="nav-number">5.</span> <span class="nav-text">参考</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E6%80%BB%E7%BB%93"><span class="nav-number">6.</span> <span class="nav-text">总结</span></a></li></ol>
    </div>
</div>
        </aside>
    

    <div class="image-viewer-container">
    <img src="">
</div>


    

</main>



<script src="//cdn.jsdelivr.net/npm/hexo-theme-keep@3.4.5/source/js/utils.js"></script><script src="//cdn.jsdelivr.net/npm/hexo-theme-keep@3.4.5/source/js/main.js"></script><script src="//cdn.jsdelivr.net/npm/hexo-theme-keep@3.4.5/source/js/header-shrink.js"></script><script src="//cdn.jsdelivr.net/npm/hexo-theme-keep@3.4.5/source/js/back2top.js"></script><script src="//cdn.jsdelivr.net/npm/hexo-theme-keep@3.4.5/source/js/dark-light-toggle.js"></script>




    <script src="//cdn.jsdelivr.net/npm/hexo-theme-keep@3.4.5/source/js/code-copy.js"></script>




<div class="post-scripts">
    
        <script src="//cdn.jsdelivr.net/npm/hexo-theme-keep@3.4.5/source/js/left-side-toggle.js"></script><script src="//cdn.jsdelivr.net/npm/hexo-theme-keep@3.4.5/source/js/libs/anime.min.js"></script><script src="//cdn.jsdelivr.net/npm/hexo-theme-keep@3.4.5/source/js/toc.js"></script>
    
</div>



</body>
</html>
